<template>
  <NavBar :changeComponent="changeComponent" />
  <main>
    <component :is="components[currentComponent]" />
  </main>
</template>
<script setup>
import { ref } from "vue";
import NavBar from "@/components/NavBar.vue";
import Home from "@/components/Home.vue";
import Order from "@/components/Order.vue";

// // 定义并管理counter状态
// const counter = ref(0);

// // 定义增减函数
// function decrease() {
//   counter.value--;
// }

// function increase() {
//   counter.value++;
// }

const components = {
  Home,
  Order,
};
const currentComponent = ref("Home");

function changeComponent(componentName) {
  currentComponent.value = componentName;
}
</script>
<style scoped>
main {
  text-align: center;
}
</style>
